<template>
  <div>
    <h2>侦听器</h2>
    请输入问题: <input type="text" v-model="question" />
    <div>{{ anwser }}</div>
    <hr />
    <h3>侦听器的配置选项-handler配置</h3>
    <h2>{{ info.name }}</h2>
    <h2>{{ info.book.name }}</h2>
    <button @click="changeInfo">改变info</button>
    <button @click="changeInfoName">改变info.name</button>
    <button @click="changeInfoBookName">改变info.book.name</button>
  </div>
</template>

<script>
export default {
  name: 'ztq',
  data() {
    return {
      // 1.需求：侦听question的变化时, 去进行一些逻辑的处理(JavaScript, 网络请求)
      question: '',
      anwser: '',
      info: { name: '张三', age: 18, book: { name: 'Vue.js2' } }
    }
  },
  // 2.侦听器
  watch: {
    // 3.侦听question的变化
    // question ：侦听的data中的属性的名称
    // newValue ：变化后的新值
    // oldValue ：变化前的旧值
    question(newValue, oldValue) {
      console.log('question新值: ', newValue, 'question旧值', oldValue)
      // 4.question 变化后调用 queryAnswer() 方法
      this.queryAnswer()
    },
    // 侦听info对象的更新
    info: {
      handler: function (newInfo, oldInfo) {
        console.log('info新值:', newInfo, 'info旧值:', oldInfo)
      },
      // 深度侦听 info 对象的更新（info内部发生的改变是可以侦听到的）,改为true
      deep: false,
      immediate: false // 让handler中定义的函数 立即执行一次默认false
    }
  },
  methods: {
    queryAnswer() {
      this.anwser = `你的问题是：${this.question}? 答案：哈哈哈哈!`
    },
    changeInfo() {
      this.info = { name: 'kobe', age: 18, book: { name: 'vue.js3' } }
    },
    changeInfoName() {
      this.info.name = 'rose'
    },
    changeInfoBookName() {
      this.info.book.name = 'React'
    }
  }
}
</script>

<style lang="scss" scoped></style>
